<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2014/6/11
  Time: 17:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>百度短网址</title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/bootbox.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-toggle="tab">缩短网址</a></li>
    <li><a href="#profile" data-toggle="tab">网址还原</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <div class="row">
        <div class="col-xs-7" style="margin-top: 10px">
        <input id="longUrl" name="url" class="form-control"  type="text" placeholder="请输入长网址">
        </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div id="swrite" class="col-xs-5">
                <h3 id="svalue"> <small></small></h3>
            </div>
            <div class=" col-md-offset-6">
                <button id="sortbtn" type="submit" class="btn btn-primary">缩短网址</button>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="profile">
        <div class="row">
            <div class="col-xs-7" style="margin-top: 10px">
                <input id="shortUrl" class="form-control"  type="text" placeholder="请输入短网址">
            </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div id="lwrite" class="col-xs-5">
                <h3 id="lvalue"> <small></small></h3>
            </div>
            <div class=" col-md-offset-6">
                <button id="longbtn"  class="btn btn-primary">还原网址</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(function(){
        $('#sortbtn').click(function(){
            $.ajax({
                type: "post",
                url: "sortUrl.post",
                data: {
                    url:$("#longUrl").val()
                },
                dataType : "json",
                success: function(data){
                  if(data.tinyurl!=null){
                      var html='';
                      html +='<h3 style="color: red">'+data.tinyurl+'<small></small></h3>'
                      $('#swrite').html(html);
                  }else{
                      var html='';
                      html +='<h3 style="color: red">'+data.err_msg+'<small></small></h3>'
                      $('#swrite').html(html);
                  }
                },
                error: function(){
                    var html='';
                    html +='<h3 style="color: red">出错了！<small></small></h3>'
                    $('#swrite').html(html);
                }
            });
        });

        $('#longbtn').click(function(){
            $.ajax({
                type: "post",
                url: "longUrl.post",
                data: {
                    url:$("#shortUrl").val()
                },
                dataType : "json",
                success: function(data){
                  if(data.longurl!=null){
                      var html='';
                      html +='<h3 style="color: red">'+data.longurl+'<small></small></h3>'
                      $('#lwrite').html(html);
                  }else{
                      var html='';
                      html +='<h3 style="color: red">'+data.err_msg+'<small></small></h3>'
                      $('#lwrite').html(html);
                  }
                },
                error: function(){
                    var html='';
                    html +='<h3 style="color: red">出错了！<small></small></h3>'
                    $('#lwrite').html(html);
                }
            });
        });
    });
</script>
</html>
